<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="css/eui.css">
    <style>
        body {
            margin: 0;
        }

        #app {
            text-align: center;
        }

        h1 {
            font-size: 72px;
            color: rgb(0, 150, 215);
            margin-bottom: 0;
        }

        img {
            width: 100px;
        }

        h2 {
            font-size: 32px;
            color: #0095d7;
            margin: 0;
        }

        #reg {
            width: 333px;
        }

        a {
            text-decoration: none
        }

        h3 {
            color: #333;
            font-weight: 500;
        }

        el-input {
            padding-left: 500px;
        }

        .el-input__inner {
            padding: 0 40px;
        }

        .bjimg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -5;
            object-fit: cover;
        }

        .el-page-header__content {
            margin: auto;
        }

    </style>
</head>
<body>
<video src="images/992.mp4" class="bjimg" autoplay loop muted>
    <source src="images/992.mp4" type=""/>
</video>

<div id="app">
    <div style="background-color: #0ccab6">
        <a href="/">
            <el-page-header @back="goBack" content="欢迎来到金猫银猫商城,请登录" style=";padding: 20px 20px;"></el-page-header>
        </a>
    </div>
    <div>
        <el-card style="width: 450px;height: 333px;margin: 100px auto;margin-right: 160px;
  background-color: rgba(255,255,255,0.3)">
            <el-form style="width: 400px;margin-bottom: 60px" label-width="60px">
                <div>
                    <h3 align="left" style="margin-left: 33px">
                        <a href="/login.html" style="margin-right: 15px;color: black" >登录</a>
                        <a href="/reg.html" style="margin-right: 15px;color: black" >注册</a>
                    </h3>
                </div>


                <el-form-item>
                    <div>
                        <el-input type="text" v-model="user.username"
                                  placeholder="请输入用户名"
                                  style=";margin-left: -60px;border: 0px;position: relative;"></el-input>
                        <i class="el-icon-user-solid"
                           style="position: absolute;margin-left: -328px;margin-top: 13px"></i>
                    </div>
                </el-form-item>


                <el-form-item>
                    <el-input type="password" v-model="user.password"
                              placeholder="请输入密码" style="margin-left: -60px"></el-input>
                    <i class="el-icon-s-cooperation"
                       style="position: absolute;margin-left: -328px;margin-top: 13px"></i>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="login()" id="login" style="margin-left: -60px;">登录</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>

</div>
<div class="copyright" style="line-height: 30px;margin: 275px 0 20px 0 ;border-top: solid 2px #0ccab6 ; color: #555; ">
    <p class="copy wrap" style="margin-left: 100px">
        <a href="#">关于金猫银猫</a>
        <a href="#">帮助中心</a>
        <a href="#">诚聘英才</a>
        <a href="#">联系我们</a>
        <a href="#">网站合作</a>
        <a href="#">法律声明</a>
        <a href="#">廉政举报</a><br>
        <a href="#">京东商城</a> |
        <a href="#">中国白银网</a> |
        <a href="#">央视网</a> |
        <a href="#">1号店</a> |
        <a href="#">京东商城</a> |
        <a href="#">中国白银网</a> |
        <a href="#">央视网</a> |
        <a href="#">1号店</a> <br>

        <a href="http://www.csmall.com/help.do?page=help_help_icp" target="_blank">中国增值电信业务经营许可证 B2-20140169号</a>
        <span style="line-height:1.5;"> | <br>
            ©2014深圳银瑞吉文化发展有限公司 All Rights Reserved | 国家信息产业部粤ICP备14018586号</span>
        <span class="powerby">技术支持：<a href="http://www.jentian.com/" target="_blank" title="广东井田云科技有限公司">井田云</a>
                        <br>
                    </span>
    </p>
</div>
</body>
<script src="js/vue.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script src="js/axios.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                user: {
                    username: "",
                    password: ""
                }
            }
        },
        methods: {
            login() {
                axios.post("/index/login", v.user).then(function (response) {
                    if (response.data == 1) {
                        location.href = "/";//跳转到首页
                    } else if (response.data == 2) {
                        v.$message.error("用户名不存在!");
                    } else {
                        v.$message.error("密码错误!");
                    }
                })
            },
            goBack() {
                console.log('fan');
          }
        }
    })
</script>
</html>